<template>
  <div id="base" class="">

    <!-- Unnamed (Group) -->
    <div id="u0" class="ax_default" data-left="79" data-top="174" data-width="240" data-height="97">

      <!-- Unnamed (Rectangle) -->
      <div id="u1" class="ax_default box_2">
        <div id="u1_div" class=""></div>
        <div id="u1_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u2" class="ax_default" data-left="98" data-top="195" data-width="55" data-height="55">

        <!-- Unnamed (Ellipse) -->
        <div id="u3" class="ax_default ellipse">
          <img id="u3_img" class="img " :src="img3">
          <div id="u3_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- Unnamed (Shape) -->
        <div id="u4" class="ax_default box_3">
          <img id="u4_img" class="img " :src="img4" />
          <div id="u4_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5" class="ax_default paragraph">
        <div id="u5_div" class=""></div>
        <div id="u5_text" class="text ">
          <p><span>订单金额</span></p>
        </div>
      </div>

      <!-- 数字 (Rectangle) -->
      <div id="u6" class="ax_default heading_3" data-label="数字">
        <div id="u6_div" class=""></div>
        <div id="u6_text" class="text ">
          <p><span>{{ data.ddje }}</span></p>
        </div>
      </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u7" class="ax_default heading_2">
      <div id="u7_div" class=""></div>
      <div id="u7_text" class="text ">
        <p><span>{{ this.$store.state.user.name }}</span></p>
      </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u8" class="ax_default heading_3">
      <div id="u8_div" class=""></div>
      <div id="u8_text" class="text ">
        <p><span>欢迎使用，见实力·认证机构信息管理系统</span></p>
      </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u9" class="ax_default box_1">
      <div id="u9_div" class="">
        <div ref="u9_div" style="width: 90%; height: 90%;"></div>
      </div>
      <div id="u9_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u10" class=" box_1">
      <div id="u10_div" class="">
        <h3>待办事项</h3>
        <MyTodo :Width="320" :Data="TodoList" @Read="handleMessageRead" @Detail="hanndleMessageDetail">

        </MyTodo>
      </div>
      <div id="u10_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u11" class="ax_default" data-left="419" data-top="174" data-width="240" data-height="97">

      <!-- Unnamed (Rectangle) -->
      <div id="u12" class="ax_default box_2">
        <div id="u12_div" class=""></div>
        <div id="u12_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u13" class="ax_default" data-left="438" data-top="195" data-width="55" data-height="55">

        <!-- Unnamed (Ellipse) -->
        <div id="u14" class="ax_default ellipse">
          <img id="u14_img" class="img " :src="img3">
          <div id="u14_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- Unnamed (Shape) -->
        <div id="u15" class="ax_default box_3">
          <img id="u15_img" class="img " :src="img4" />
          <div id="u15_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u16" class="ax_default paragraph">
        <div id="u16_div" class=""></div>
        <div id="u16_text" class="text ">
          <p><span>待收款金额</span></p>
        </div>
      </div>

      <!-- 数字 (Rectangle) -->
      <div id="u17" class="ax_default heading_3" data-label="数字" @click="handleDskjeClick">
        <div id="u17_div" class=""></div>
        <div id="u17_text" class="text ">
          <p><span>{{ data.dskje }}</span></p>
        </div>
      </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u18" class="ax_default" data-left="759" data-top="174" data-width="240" data-height="97">

      <!-- Unnamed (Rectangle) -->
      <div id="u19" class="ax_default box_2">
        <div id="u19_div" class=""></div>
        <div id="u19_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u20" class="ax_default" data-left="778" data-top="195" data-width="55" data-height="55">

        <!-- Unnamed (Ellipse) -->
        <div id="u21" class="ax_default ellipse">
          <img id="u21_img" class="img " :src="img3">
          <div id="u21_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- Unnamed (Shape) -->
        <div id="u22" class="ax_default box_3">
          <img id="u22_img" class="img " :src="img4" />
          <div id="u22_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u23" class="ax_default paragraph">
        <div id="u23_div" class=""></div>
        <div id="u23_text" class="text ">
          <p><span>待认证</span></p>
        </div>
      </div>

      <!-- 数字 (Rectangle) -->
      <div id="u24" class="ax_default heading_3" data-label="数字" @click="handleDshClick('drz')">
        <div id="u24_div" class=""></div>
        <div id="u24_text" class="text ">
          <p><span>{{ data.drz }}</span></p>
        </div>
      </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u25" class="ax_default" data-left="1099" data-top="174" data-width="240" data-height="97">

      <!-- Unnamed (Rectangle) -->
      <div id="u26" class="ax_default box_2">
        <div id="u26_div" class=""></div>
        <div id="u26_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u27" class="ax_default" data-left="1118" data-top="195" data-width="55" data-height="55">

        <!-- Unnamed (Ellipse) -->
        <div id="u28" class="ax_default ellipse">
          <img id="u28_img" class="img " :src="img3">
          <div id="u28_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- Unnamed (Shape) -->
        <div id="u29" class="ax_default box_3">
          <img id="u29_img" class="img " :src="img4" />
          <div id="u29_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u30" class="ax_default paragraph">
        <div id="u30_div" class=""></div>
        <div id="u30_text" class="text ">
          <p><span>待监一</span></p>
        </div>
      </div>

      <!-- 数字 (Rectangle) -->
      <div id="u31" class="ax_default heading_3" data-label="数字" @click="handleDshClick('djy')">
        <div id="u31_div" class=""></div>
        <div id="u31_text" class="text ">
          <p><span>{{ data.djy }}</span></p>
        </div>
      </div>
    </div>

    <!-- Unnamed (Group) -->
    <div id="u32" class="ax_default" data-left="1439" data-top="174" data-width="240" data-height="97">

      <!-- Unnamed (Rectangle) -->
      <div id="u33" class="ax_default box_2">
        <div id="u33_div" class=""></div>
        <div id="u33_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u34" class="ax_default" data-left="1458" data-top="195" data-width="55" data-height="55">

        <!-- Unnamed (Ellipse) -->
        <div id="u35" class="ax_default ellipse">
          <img id="u35_img" class="img " :src="img3">
          <div id="u35_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>

        <!-- Unnamed (Shape) -->
        <div id="u36" class="ax_default box_3">
          <img id="u36_img" class="img " :src="img4" />
          <div id="u36_text" class="text " style="display:none; visibility: hidden">
            <p></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u37" class="ax_default paragraph">
        <div id="u37_div" class=""></div>
        <div id="u37_text" class="text ">
          <p><span>待监二</span></p>
        </div>
      </div>

      <!-- 数字 (Rectangle) -->
      <div id="u38" class="ax_default heading_3" data-label="数字" @click="handleDshClick('dje')">
        <div id="u38_div" class=""></div>
        <div id="u38_text" class="text ">
          <p><span>{{ data.dje }}</span></p>
        </div>
      </div>
    </div>

    <vxe-modal v-model="dshModal" title="待审核项目信息生成" :width="1200" :height="450">
      <vxe-grid ref="maingrid" v-bind="GridOptions">
        <template #operation="{ row }">
          <vxe-button :size="componentSize" mode="text" status="primary" content="生成" @click="handleCreate(row)" />
        </template>
      </vxe-grid>
      <vxe-modal v-model="editModal" title="数据编辑" :width="1120" :height="800">
        <vxe-form ref="editForm" v-bind="FormOptions" @submit="handleEditModalSubmit" @reset="handleEditModalReset">
        </vxe-form>
      </vxe-modal>
    </vxe-modal>
  </div>

</template>

<script>
import img3 from './images/u3.svg'
import img4 from './images/u4.svg'
import CURDHelper from '@/utils/CURDHelper'
import MyTodo from '@/components/Todo'
import PageConfig from '@/utils/pageConfig'
import XEUtils from 'xe-utils'
import { VxeUI } from 'vxe-pc-ui';
export default {
  name: 'Dashboard',
  components: {
    MyTodo
  },
  data() {
    const gltxItemRender = {
      name: 'VxeSelect',
      props: {
        filterable: true,
      },
      options: [],
    }
    const khItemRender = {
      name: 'VxeSelect',
      props: {
        filterable: true,
      },
      options: []
    }
    return {
      gltxItemRender,
      khItemRender,
      img3,
      img4,
      data: {
        ddje: 0,
        dskje: 0,
        drz: 0,
        djy: 0,
        dje: 0,
        drztx: [],
        djetx: [],
        djytx: []
      },
      TodoList: [],
      dshModal: false,
      GridOptions: {
        id: 'ReportCertificate_MainGrid',
        border: true,
        stripe: true,
        loading: false,
        size: PageConfig.ComponentSize,
        height: 380,
        columnConfig: {
          resizable: true
        },
        rowConfig: {
          isHover: true,
          isCurrent: true
        },
        checkboxConfig: {
          highlight: true,
          range: true
        },
        columns: [
          { type: 'seq', width: 50 },
          { type: 'checkbox', width: 35 },
          { field: 'khmc', title: '客户名称', sortable: true, minWidth: 120, showOverflow: true },
          { field: 'txmc', title: '体系名称', sortable: true, minWidth: 120, showOverflow: true },
          { field: 'zsh', title: '证书号', sortable: true, minWidth: 120, showOverflow: true },
          {
            field: 'zsrq', title: '证书开始日期', sortable: true, minWidth: 120, showOverflow: true,
            formatter: ({ cellValue }) => XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
          },
          {
            field: 'zsyxq', title: '证书结束日期', sortable: true, minWidth: 120, showOverflow: true,
            formatter: ({ cellValue }) => XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
          },
          {
            field: 'mcshrq', title: '末次审核日期', sortable: true, minWidth: 120, showOverflow: true,
            formatter: ({ cellValue }) => XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
          },
          {
            field: 'xcshrq', title: '下次审核日期', sortable: true, minWidth: 120, showOverflow: true,
            formatter: ({ cellValue }) => XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
          },
          { field: 'dshlx', title: '待审核类型', minWidth: 100, showOverflow: true },
          { field: 'operation', title: '操作', fixed: 'right', width: 60, slots: { default: 'operation' } },
        ],
        data: []
      },
      componentSize: PageConfig.ComponentSize,
      editModal: false,
      FormOptions: {
        'title-width': 100,
        border: true,
        titleBackground: true,
        data: {
          id: -1,
          createid: '',
          createtime: '',
          createname: '',
          updateid: '',
          updatetime: '',
          updatename: '',
          khid: undefined,
          txid: undefined,
          erpbh: '',
          sf: '',
          sxq: '',
          shlx: '',
          rzfw: '',
          txrs: '',
          csje: undefined,
          jsje: undefined,
          htqdrq: undefined,
          bz: '',
          htje: undefined,
          sfdcs: undefined,
          dcslb: undefined,
          htlx: undefined,
          htdz: undefined,
        },
        rules: {
          txid: [{ required: true, message: '请选择体系名称', trigger: 'blur' }],
          khid: [{ required: true, message: '请选择客户信息', trigger: 'blur' }],
          erpbh: [{ required: true, message: '请输入合同号', trigger: 'blur' }],
          shlx: [{ required: true, message: '请选择审核类型', trigger: 'blur' }],
          rzfw: [{ required: true, message: '请选择认证范围', trigger: 'blur' }],
          txrs: [{ required: true, message: '请输入体系人数', trigger: 'blur', validator: this.ValidatorNumber }],
          csje: [{ required: true, message: '请输入初审金额', trigger: 'blur', validator: this.ValidatorNumber }],
          htje: [{ required: true, message: '请输入合同金额', trigger: 'blur', validator: this.ValidatorNumber }],
          jsje: [{ required: true, message: '请输入监审金额', trigger: 'blur', validator: this.ValidatorNumber }],
          htqdrq: [{ required: true, message: '请选择合同日期', trigger: 'blur' }],
        },
        items: [
          { field: 'txid', title: '体系名称', span: 12, itemRender: gltxItemRender, placeholder: '请选择体系名称' },
          { field: 'khid', title: '客户名称', span: 12, itemRender: khItemRender, placeholder: '请选择关联体系' },
          { field: 'erpbh', title: '合同号', span: 12, itemRender: { name: 'VxeInput' }, placeholder: '请输入合同号' },
          {
            field: 'htlx', title: '合同类型', span: 12, itemRender: {
              name: 'VxeSelect',
              options: [{ label: '初审', value: '初审' }, { label: '监一', value: '监一' },
              { label: '监二', value: '监二' }, { label: '再认证', value: '再认证' }]
            }, placeholder: '请选择合同类型'
          },
          { field: 'sf', title: '省份', span: 12, itemRender: { name: 'VxeInput' }, placeholder: '请输入省份' },
          { field: 'sxq', title: '区域', span: 12, itemRender: { name: 'VxeInput' }, placeholder: '请输入区域' },
          {
            field: 'shlx', title: '审核类型', span: 12, itemRender: {
              name: 'VxeSelect',
              options: [{ label: '初认证', value: '初认证' }, { label: '监一', value: '监一' },
              { label: '监二', value: '监二' }, { label: '再认证', value: '再认证' },
              { label: '扩大', value: '扩大' }, { label: '证书变更', value: '证书变更' }]
            }, placeholder: '请选择审核类型'
          },
          {
            field: 'txrs', title: '体系人数', span: 12, placeholder: '请输入体系人数',
            itemRender: { name: 'VxeInput', clearable: true, placeholder: '请输入体系人数' }
          },
          {
            field: 'rzfw', title: '认证范围', span: 24, itemRender: {
              name: 'VxeTextarea', maxlegnth: 500, clearable: true,
              showWordCount: true
            }
          },
          {
            field: 'csje', title: '初审金额', span: 12, placeholder: '请输入初审金额',
            itemRender: {
              name: 'VxeInput', clearable: true, placeholder: '请输入初审金额',
              events: { change: e => { this.FormOptions.data.htje = this.FormOptions.data.csje } }
            }
          },
          {
            field: 'jsje', title: '监审金额', span: 12, placeholder: '请输入监审金额',
            itemRender: { name: 'VxeInput', clearable: true, placeholder: '请输入监审金额' }
          },
          {
            field: 'htje', title: '合同金额', span: 12, placeholder: '请输入合同金额',
            itemRender: { name: 'VxeInput', clearable: true, placeholder: '请输入合同金额' }
          },
          {
            field: 'htqdrq', title: '合同日期', span: 12, itemRender: {
              name: 'VxeDatePicker', type: 'date', valueFormat: 'YYYY-MM-DD',
              placeholder: '请选择签单日期'
            }
          },
          {
            field: 'sfdcs', title: '是否多场所', span: 12, itemRender: {
              name: 'VxeSelect',
              options: [{ label: '', value: '' }, { label: '是', value: '是' }, { label: '否', value: '否' }]
            }, placeholder: '请选择是否多场所'
          },
          {
            field: 'dcslb', title: '多场所类别', span: 12, itemRender: {
              name: 'VxeSelect',
              options: [{ label: '', value: '' }, { label: '延伸', value: '延伸' }, { label: '支持', value: '支持' }], clearable: true
            }, placeholder: '请选择多场所类别'
          },
          { field: 'zydm', title: '专业代码', span: 24, itemRender: { name: 'VxeInput', clearable: true, placeholder: '请输入专业代码' } },
          { field: 'htdz', title: '合同地址', span: 24, itemRender: { name: 'VxeInput', clearable: true, placeholder: '请输入合同地址' } },
          {
            field: 'bz', title: '备注', span: 24, itemRender: { name: 'VxeTextarea', maxlegnth: 500, clearable: true, showWordCount: true },
            placeholder: '请输入备注'
          },
          {
            align: 'center',
            span: 24,
            itemRender: {
              name: 'VxeButtonGroup',
              options: [{
                type: 'submit', content: '提交', status: 'primary'
              }, {
                type: 'reset', content: '重置'
              }]
            }
          }
        ]
      },
    }
  },
  mounted() {
    this.DoInitOrder();
    this.GetMessage();
    this.IntervalTask();
  },
  computed: {

  },
  created() {
    this.GetData();
    this.GetTxOptions();
    this.GetKhOptions();
  },
  methods: {
    GetMessage() {
      let request = {
        isPaging: false,
        pageSize: 1,
        pageIndex: 1,
        queryConditions: [],
        orderByConditions: [{
          column:'id',
          condition:'desc'
        }]
      }
      CURDHelper.Query(request, '/api/tpmmessage')
        .then(res => {
          this.TodoList = [];
          res.data.forEach(p => {
            this.TodoList.push(p);
          })
        }).catch(err => {
          VxeUI.modal.message({
            content: err,
            status: 'error',
            duration: this.duration
          })
        })
    },
    GetData() {
      let request = {
        isPaging: false,
        pageSize: 1,
        pageIndex: 1,
        queryConditions: [],
        orderByConditions: []
      }
      CURDHelper.Query(request, 'api/report/getfirstdata')
        .then(res => {
          this.data = res.data;
        }).catch(err => {
          VxeUI.modal.message({
            content: err,
            status: 'error',
            duration: this.duration
          })
        })
    },
    IntervalTask() {
      setInterval(() => {
        this.GetMessage();
      }, 60 * 60 * 1000);
    },
    DoInitOrder() {
      CURDHelper.Get(`/api/report/GetOrderData`)
        .then(res => {
          let myChart = this.$echarts.init(this.$refs.u9_div);
          myChart.setOption({
            title: {
              text: '年度合同金额统计图'
            },
            tooltip: {},
            xAxis: {
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {},
            series: [
              {
                name: '订单金额',
                type: 'line',
                data: res.data
              }
            ]
          });
        }).catch(err => {
          VxeUI.modal.message({
            content: err,
            status: 'error',
            duration: this.duration
          })
        })

    },
    handleDskjeClick() {
      this.$router.push({ path: '/HHHHHqqK', query: { isdashboard: true } })
    },
    handleDshClick(shlx) {
      console.log(this.data)
      if (shlx == 'drz') {
        if (this.data.drz == 0) {
          VxeUI.modal.message({ content: `${err}`, status: '没有待认证的项目信息', duration: this.duration });
        } else {

          this.GridOptions.data = this.data.drztx;
          this.dshModal = true;
        }
      } else if (shlx == 'djy') {
        if (this.data.djy == 0) {
          VxeUI.modal.message({ content: `${err}`, status: '没有待监一审核的项目信息', duration: this.duration });
        } else {
          this.GridOptions.data = this.data.djytx;
          this.dshModal = true;
        }
      } else if (shlx == 'dje') {
        if (this.data.dje == 0) {
          VxeUI.modal.message({ content: `${err}`, status: '没有待监二审核的项目信息', duration: this.duration });
        } else {
          this.GridOptions.data = this.data.djetx;
          this.dshModal = true;
        }
      }
    },
    handleCreate(row) {
      row.dshlx == '再认证' ? this.DoAdd(row) : this.DoCreate(row);
    },
    handleEditModalSubmit() {
      this.DoAddData();
    },
    handleEditModalReset() {

    },
    handleMessageRead(row) {
      let putData = undefined;
      for (let i = this.TodoList.length - 1; i >= 0; i--) {
        let currItem = this.TodoList[i];
        if (currItem.id == row.id) {
          putData = this.TodoList[i];
          this.TodoList.splice(i, 1);
        }
      }
      CURDHelper.Edit(putData, null, '/api/tpmmessage/read')
        .then(res => {         
        }).catch(err => {
          VxeUI.modal.message({ content: `${err}`, status: 'error', duration: this.duration })
        })
    },
    hanndleMessageDetail(row){
      if(row.title == '待收款'){
        return;
      }
      
      let request = {
        isPaging: false,
        pageSize: 1,
        pageIndex: 1,
        queryConditions: [{
          column:'t.id',
          condition:0,
          content:row.sjid
        }],
        orderByConditions: []
      }
      CURDHelper.Query(request, '/api/xmkhgltx')
        .then(res => {
         let currData = res.data[0];
         currData.dshlx = row.title.indexOf('再') > 0 ? '再认证' : row.title.indexOf('一') > 0 ? '监一' :'监二';
         this.GridOptions.data = [];
         this.GridOptions.data.push(currData);
         this.dshModal = true;
        }).catch(err => {
          VxeUI.modal.message({
            content: err,
            status: 'error',
            duration: this.duration
          })
        })
    },
    DoAdd(row) {
      let query = [
        { column: 'khid', condition: 0, content: row.khid },
        { column: 'txid', condition: 0, content: row.txid },
        { column: 'zsh', condition: 0, content: row.zsh },
      ]
      let request = {
        isPaging: false,
        pageSize: 1,
        pageIndex: 1,
        queryConditions: query,
        orderByConditions: []
      }
      CURDHelper.Query(request, '/api/xmglxmxx')
        .then(res => {
          if (res.data && res.data.length > 0) {
            this.FormOptions.data = res.data[0];
            this.FormOptions.data.erpbh = '';
            this.FormOptions.data.shlx = '再认证';
            this.FormOptions.data.shzt = 'N';
            this.FormOptions.data.shr = null;
            this.FormOptions.data.shsj = null;
            this.FormOptions.data.pczt = 'N';
            this.FormOptions.data.pcshr = null;
            this.FormOptions.data.pcshsj = null;
            this.FormOptions.data.pcshzt = 'N';
            this.FormOptions.data.xmzt = 'N';
            this.FormOptions.data.xmztqrr = null;
            this.FormOptions.data.xmztqrsj = null;
            this.FormOptions.data.skzt = 'N';
            this.FormOptions.data.skqrr = null;
            this.FormOptions.data.skqrsj = null;
            this.FormOptions.data.kpzt = 'N';
            this.FormOptions.data.kpqrr = null;
            this.FormOptions.data.kpqrsj = null;
            this.FormOptions.data.zsh = null;
            this.FormOptions.data.zsksrq = null;
            this.FormOptions.data.zsjsrq = null;
            this.FormOptions.data.zslb = null;
            console.log(this.FormOptions.data);
          }
          this.editModal = true;
        }).catch(err => {
          VxeUI.modal.message({ content: `${err}`, status: 'error', duration: this.duration })
        })
    },
    DoAddData() {
      //新增
      CURDHelper.Add(this.FormOptions.data, null, '/api/xmglxmxx')
        .then(res => {
          VxeUI.modal.message({ content: '新增项目信息成功', status: 'success', duration: this.duration })
          this.editModal = false;
        }).catch(err => {
          VxeUI.modal.message({ content: `${err}`, status: 'error', duration: this.duration })
        })
    },
    DoCreate(row) {
      //新增
      let postModel = {
        khid: row.khid,
        txid: row.txid,
        zsh: row.zsh,
        shxh: row.dshlx == '监一' ? 1 : 2
      }
      CURDHelper.AddWithConfirm("是否确定并生成项目信息?", postModel, null, '/api/Xmglxmxx/Create')
        .then(res => {
          VxeUI.modal.message({ content: '生成项目信息成功，请到项目管理继续操作', status: 'success', duration: this.duration })
        }).catch(err => {
          VxeUI.modal.message({ content: `${err}`, status: 'error', duration: this.duration })
        })
    },
    GetTxOptions() {
      let request = {
        isPaging: false,
        pageSize: 1,
        pageIndex: 1,
        queryConditions: [],
        orderByConditions: []
      }
      CURDHelper.Query(request, '/api/Xmjcgltx')
        .then(res => {
          this.gltxItemRender.options = [];
          res.data.forEach(item => {
            this.gltxItemRender.options.push({
              value: item.id,
              label: item.txmc
            })
          })
        }).catch(err => {
          VxeUI.modal.message({ content: `${err}`, status: 'error', duration: this.duration })
        })
    },
    GetKhOptions() {
      let request = {
        isPaging: false,
        pageSize: 1,
        pageIndex: 1,
        queryConditions: [],
        orderByConditions: []
      }
      CURDHelper.Query(request, '/api/Xmjckhxx')
        .then(res => {
          this.khItemRender.options = [];
          res.data.forEach(item => {
            this.khItemRender.options.push({
              value: item.id,
              label: item.khmc
            })
          })
        }).catch(err => {
          VxeUI.modal.message({ content: `${err}`, status: 'error', duration: this.duration })
        })
    },
  }
}
</script>
<style scoped>
.ax_default {
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
  vertical-align: none;
  text-align: center;
  line-height: normal;
  text-transform: none;
}

.heading_1 {
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 32px;
  text-align: left;
}

.heading_2 {
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 24px;
  text-align: left;
}

.heading_3 {
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 18px;
  text-align: left;
}

.heading_4 {
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 14px;
  text-align: left;
}

.heading_5 {
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: bold;
  font-style: normal;
  text-align: left;
}

.heading_6 {
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 10px;
  text-align: left;
}

.paragraph {
  text-align: left;
}

.form_hint {
  color: #999999;
}

.form_disabled {}

.box_1 {}

.box_2 {}

.ellipse {}

.box_3 {}

.line {}

.label {
  font-size: 14px;
  text-align: left;
}

textarea,
select,
input,
button {
  outline: none;
}

body {
  margin: 0px;
  background-color: rgba(242, 242, 242, 1);
  background-image: none;
  position: relative;
  left: -79px;
  width: 1600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.form_sketch {
  border-color: transparent;
  background-color: transparent;
}

#base {
  position: absolute;
  margin-top: -30px;
  z-index: 0;
}

#u0 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u1_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 240px;
  height: 97px;
  background: inherit;
  background-color: rgba(53, 199, 201, 1);
  border: none;
  border-radius: 5px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#u1 {
  border-width: 0px;
  position: absolute;
  left: 79px;
  top: 174px;
  width: 240px;
  height: 97px;
  display: flex;
}

#u1 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u1_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u2 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u3_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 55px;
  height: 55px;

}

#u3 {
  border-width: 0px;
  position: absolute;
  left: 98px;
  top: 195px;
  width: 55px;
  height: 55px;
  display: flex;
}

#u3 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u3_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u4_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 27px;
  height: 25px;
}

#u4 {
  border-width: 0px;
  position: absolute;
  left: 112px;
  top: 210px;
  width: 27px;
  height: 25px;
  display: flex;
  color: #FFFFFF;
}

#u4 .text {
  position: absolute;
  align-self: center;
  padding: 110px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u4_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u5_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 56px;
  height: 16px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
  color: #FFFFFF;
}

#u5 {
  border-width: 0px;
  position: absolute;
  left: 212px;
  top: 186px;
  width: 56px;
  height: 16px;
  display: flex;
  font-size: 14px;
  color: #FFFFFF;
}

#u5 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  top: -10px;
}

#u5_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}

#u6_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 72px;
  height: 37px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  color: #FFFFFF;
}

#u6 {
  border-width: 0px;
  position: absolute;
  left: 204px;
  top: 213px;
  width: 72px;
  height: 37px;
  display: flex;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  color: #FFFFFF;
}

#u6 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  top: -20px;
}

#u6_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}

#u7_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 72px;
  height: 28px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: 'Consolas Bold', 'Consolas Regular', 'Consolas', sans-serif;
  font-weight: 700;
  font-style: normal;
}

#u7 {
  border-width: 0px;
  position: absolute;
  left: 79px;
  top: 60px;
  width: 72px;
  height: 28px;
  display: flex;
  font-family: 'Consolas Bold', 'Consolas Regular', 'Consolas', sans-serif;
  font-weight: 700;
  font-style: normal;
}

#u7 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
}

#u7_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}

#u8_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 334px;
  height: 22px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: 'Consolas Bold', 'Consolas Regular', 'Consolas', sans-serif;
  font-weight: 700;
  font-style: normal;
}

#u8 {
  border-width: 0px;
  position: absolute;
  left: 82px;
  top: 121px;
  width: 334px;
  height: 22px;
  display: flex;
  font-family: 'Consolas Bold', 'Consolas Regular', 'Consolas', sans-serif;
  font-weight: 700;
  font-style: normal;
}

#u8 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
}

#u8_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}

#u9_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1200px;
  height: 600px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 0px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#u9 {
  border-width: 0px;
  position: absolute;
  left: 82px;
  top: 316px;
  width: 1200px;
  height: 600px;
  display: flex;
}

#u9 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u9_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u10_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 365px;
  height: 600px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 0px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#u10 {
  border-width: 0px;
  position: absolute;
  left: 1314px;
  top: 316px;
  width: 365px;
  height: 600px;
  display: flex;
}

#u10 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u10_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u11 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u12_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 240px;
  height: 97px;
  background: inherit;
  background-color: rgba(90, 177, 239, 1);
  border: none;
  border-radius: 5px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#u12 {
  border-width: 0px;
  position: absolute;
  left: 419px;
  top: 174px;
  width: 240px;
  height: 97px;
  display: flex;
}

#u12 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u12_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u13 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u14_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 55px;
  height: 55px;
}

#u14 {
  border-width: 0px;
  position: absolute;
  left: 438px;
  top: 195px;
  width: 55px;
  height: 55px;
  display: flex;
}

#u14 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u14_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u15_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 27px;
  height: 25px;
}

#u15 {
  border-width: 0px;
  position: absolute;
  left: 452px;
  top: 210px;
  width: 27px;
  height: 25px;
  display: flex;
  color: #FFFFFF;
}

#u15 .text {
  position: absolute;
  align-self: center;
  padding: 110px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u15_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u16_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 56px;
  height: 16px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
  color: #FFFFFF;
}

#u16 {
  border-width: 0px;
  position: absolute;
  left: 552px;
  top: 186px;
  width: 56px;
  height: 16px;
  display: flex;
  font-size: 14px;
  color: #FFFFFF;
}

#u16 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  top: -10px;
}

#u16_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}

#u17_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 72px;
  height: 37px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  color: #FFFFFF;
}

#u17 {
  border-width: 0px;
  position: absolute;
  left: 544px;
  top: 213px;
  width: 72px;
  height: 37px;
  display: flex;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  color: #FFFFFF;
  cursor: pointer;
}

#u17 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  top: -20px;
}

#u17_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}

#u18 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u19_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 240px;
  height: 97px;
  background: inherit;
  background-color: rgba(253, 160, 75, 1);
  border: none;
  border-radius: 5px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#u19 {
  border-width: 0px;
  position: absolute;
  left: 759px;
  top: 174px;
  width: 240px;
  height: 97px;
  display: flex;
}

#u19 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u19_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u20 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u21_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 55px;
  height: 55px;
}

#u21 {
  border-width: 0px;
  position: absolute;
  left: 778px;
  top: 195px;
  width: 55px;
  height: 55px;
  display: flex;
}

#u21 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u21_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u22_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 27px;
  height: 25px;
}

#u22 {
  border-width: 0px;
  position: absolute;
  left: 792px;
  top: 210px;
  width: 27px;
  height: 25px;
  display: flex;
  color: #FFFFFF;
}

#u22 .text {
  position: absolute;
  align-self: center;
  padding: 110px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u22_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u23_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 56px;
  height: 16px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
  color: #FFFFFF;
}

#u23 {
  border-width: 0px;
  position: absolute;
  left: 892px;
  top: 186px;
  width: 56px;
  height: 16px;
  display: flex;
  font-size: 14px;
  color: #FFFFFF;
}

#u23 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  top: -10px;
}

#u23_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}

#u24_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 72px;
  height: 37px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  color: #FFFFFF;
}

#u24 {
  border-width: 0px;
  position: absolute;
  left: 884px;
  top: 213px;
  width: 72px;
  height: 37px;
  display: flex;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  color: #FFFFFF;
  cursor: pointer;
}

#u24 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  top: -20px;
}

#u24_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}

#u25 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u26_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 240px;
  height: 97px;
  background: inherit;
  background-color: rgba(240, 87, 90, 1);
  border: none;
  border-radius: 5px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#u26 {
  border-width: 0px;
  position: absolute;
  left: 1099px;
  top: 174px;
  width: 240px;
  height: 97px;
  display: flex;
}

#u26 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u26_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u27 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u28_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 55px;
  height: 55px;
}

#u28 {
  border-width: 0px;
  position: absolute;
  left: 1118px;
  top: 195px;
  width: 55px;
  height: 55px;
  display: flex;
}

#u28 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u28_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u29_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 27px;
  height: 25px;
}

#u29 {
  border-width: 0px;
  position: absolute;
  left: 1132px;
  top: 210px;
  width: 27px;
  height: 25px;
  display: flex;
  color: #FFFFFF;
}

#u29 .text {
  position: absolute;
  align-self: center;
  padding: 110px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u29_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u30_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 56px;
  height: 16px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
  color: #FFFFFF;
}

#u30 {
  border-width: 0px;
  position: absolute;
  left: 1232px;
  top: 186px;
  width: 56px;
  height: 16px;
  display: flex;
  font-size: 14px;
  color: #FFFFFF;
}

#u30 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  top: -10px;
}

#u30_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}

#u31_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 72px;
  height: 37px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  color: #FFFFFF;
}

#u31 {
  border-width: 0px;
  position: absolute;
  left: 1224px;
  top: 213px;
  width: 72px;
  height: 37px;
  display: flex;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  color: #FFFFFF;
  cursor: pointer;
}

#u31 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  top: -20px;
}

#u31_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}

#u32 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u33_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 240px;
  height: 97px;
  background: inherit;
  background-color: rgba(83, 185, 66, 1);
  border: none;
  border-radius: 5px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#u33 {
  border-width: 0px;
  position: absolute;
  left: 1439px;
  top: 174px;
  width: 240px;
  height: 97px;
  display: flex;
}

#u33 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u33_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u34 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u35_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 55px;
  height: 55px;
}

#u35 {
  border-width: 0px;
  position: absolute;
  left: 1458px;
  top: 195px;
  width: 55px;
  height: 55px;
  display: flex;
}

#u35 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u35_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u36_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 27px;
  height: 25px;
}

#u36 {
  border-width: 0px;
  position: absolute;
  left: 1472px;
  top: 210px;
  width: 27px;
  height: 25px;
  display: flex;
  color: #FFFFFF;
}

#u36 .text {
  position: absolute;
  align-self: center;
  padding: 110px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u36_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u37_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 56px;
  height: 16px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
  color: #FFFFFF;
}

#u37 {
  border-width: 0px;
  position: absolute;
  left: 1572px;
  top: 186px;
  width: 56px;
  height: 16px;
  display: flex;
  font-size: 14px;
  color: #FFFFFF;
}

#u37 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  top: -10px;
}

#u37_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}

#u38_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 72px;
  height: 37px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  color: #FFFFFF;
}

#u38 {
  border-width: 0px;
  position: absolute;
  left: 1564px;
  top: 213px;
  width: 72px;
  height: 37px;
  display: flex;
  font-family: 'Arial Normal', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  color: #FFFFFF;
  cursor: pointer;
}

#u38 .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
  top: -20px;
}

#u38_text {
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
}
</style>